<template>
	<view class="container">
		<view class="top-view">
			
			<view class="frame-out" :style="{backgroundColor: selectedColor.out}"></view>
			
			<view class="frame-in" :style="{backgroundColor: selectedColor.in}"></view>
			
			<image class="img-watch" src="../../static/images/name_bg.png" mode="aspectFill"></image>
		</view>
		
		<view class="frame-view" >
			<text class="txt-frame-color" >边框颜色</text>
			<view class="frame-list" >
				<view v-for="(item,index) in colorList" :key="index" class="list-item">
					<view class="item-container">
						<view class="item-out" :style="{backgroundColor: item.out}"></view>
					
						<view class="item-in" :style="{backgroundColor: item.in}"></view>
						
						<view class="item-content"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedColor:{
					out:'#808080',
					in:'#000000'
				},
				// 颜色列表
				colorList: [
					{ out: '#808080', in: '#000000' }, // 灰黑
					{ out: '#FFFFFF', in: '#FFFFFF' }, // 白白
					{ out: '#808080', in: '#FFFF00' }, // 灰黄
					{ out: '#808080', in: '#FF00FF' }, // 灰五彩（这里用紫色代表五彩）
					{ out: '#808080', in: '#808080' }  // 灰灰
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.container{
		display: flex;
		flex-direction: column;
		background-color: aliceblue;
		align-items: center;
		padding: 20rpx;
		height: 100%;
	}
	
	.top-view{
		display: flex;
		position: relative;
		width: 400rpx;
		height: 400rpx;
		align-items: center;
		justify-content: center;
		background-color: cadetblue;
	}
	
	.frame-out{
		display: flex;
		position: absolute;
		width: 260rpx;
		height: 300rpx;
		
		border-radius: 30rpx;
	}
	
	.frame-in{
		display: flex;
		position: absolute;
		width: 244rpx;
		height: 284rpx;
		
		border-radius: 24rpx;
	}
	
	.img-watch{
		display: flex;
		position: absolute;
		width: 220rpx;
		height: 260rpx;
		border-radius: 20rpx;
	}
	
	.frame-view{
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		background-color: white;
		width: 100%;
		height: 600rpx;
		margin-top: 20rpx;
	}
	
	.txt-frame-color{
		font-size: 16rpx;
		color: #000000;
		margin: 16rpx;
	}
	
	.frame-list{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		gap: 10rpx 10rpx;
	}
	
	.list-item{
		display: flex;
	}
	
	.item-container{
		display: flex;
		position: relative;
		width: 52rpx;
		height: 60rpx;
		align-items: center;
		justify-content: center;
	}
	
	.item-out{
		display: flex;
		position: absolute;
		width: 52rpx;
		height: 60rpx;
		border-radius: 6rpx;
	}
	
	.item-in{
		display: flex;
		position: absolute;
		width: 48rpx;
		height: 56rpx;	
		border-radius: 4rpx;
	}
	
	.item-content{
		display: flex;
		position: absolute;
		width: 44rpx;
		height: 52rpx;
		border-radius: 4rpx;
		background-color: white;
	}
</style>
